<template>
    <div>
        <div id="map" class="map"></div>
        <div id="info">&nbsp;</div>
    </div>
</template>

<script>
    import "ol/ol.css";
    import Map from "ol/Map";
    import TileLayer from 'ol/layer/Tile';
    import OSM from 'ol/source/OSM';
    import View from "ol/View";
    import Projection from "ol/proj/Projection"
    import MVT from "ol/format/MVT";
    import VectorTileLayer from "ol/layer/VectorTile";
    import VectorTileSource from "ol/source/VectorTile";
    import WMTS from 'ol/tilegrid/WMTS';
    //
    //
    //import WebGLMap from 'ol/WebGLMap';
    // import TileLayer from 'ol/layer/Tile';
    // import OSM from 'ol/source/OSM';

    // import Map from 'ol/Map.js';
    // import View from 'ol/View.js';
    // import GeoJSON from 'ol/format/GeoJSON.js';
    // import VectorLayer from 'ol/layer/Vector.js';
    // import VectorSource from 'ol/source/Vector.js';
    // import {Fill, Stroke, Style, Text} from 'ol/style.js';


    export default {
        name: "app",
        // mounted() {
        //     var style = new Style({
        //         fill: new Fill({
        //             color: 'rgba(255, 255, 255, 0.6)'
        //         }),
        //         stroke: new Stroke({
        //             color: '#319FD3',
        //             width: 1
        //         }),
        //         text: new Text({
        //             font: '12px Calibri,sans-serif',
        //             fill: new Fill({
        //                 color: '#000'
        //             }),
        //             stroke: new Stroke({
        //                 color: '#fff',
        //                 width: 3
        //             })
        //         })
        //     });
        //
        //     var vectorLayer = new VectorLayer({
        //         source: new VectorSource({
        //             url: 'https://openlayers.org/en/latest/examples/data/geojson/countries.geojson',
        //             format: new GeoJSON()
        //         }),
        //         style: function(feature) {
        //             style.getText().setText(feature.get('name'));
        //             return style;
        //         }
        //     });
        //
        //     var map = new Map({
        //         layers: [vectorLayer],
        //         target: 'map',
        //         view: new View({
        //             center: [0, 0],
        //             zoom: 1
        //         })
        //     });
        //
        //     var highlightStyle = new Style({
        //         stroke: new Stroke({
        //             color: '#f00',
        //             width: 1
        //         }),
        //         fill: new Fill({
        //             color: 'rgba(255,0,0,0.1)'
        //         }),
        //         text: new Text({
        //             font: '12px Calibri,sans-serif',
        //             fill: new Fill({
        //                 color: '#000'
        //             }),
        //             stroke: new Stroke({
        //                 color: '#f00',
        //                 width: 3
        //             })
        //         })
        //     });
        //
        //     var featureOverlay = new VectorLayer({
        //         source: new VectorSource(),
        //         map: map,
        //         style: function(feature) {
        //             highlightStyle.getText().setText(feature.get('name'));
        //             return highlightStyle;
        //         }
        //     });
        //
        //     var highlight;
        //     var displayFeatureInfo = function(pixel) {
        //
        //         var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
        //             return feature;
        //         });
        //
        //         var info = document.getElementById('info');
        //         if (feature) {
        //             info.innerHTML = feature.getId() + ': ' + feature.get('name');
        //         } else {
        //             info.innerHTML = '&nbsp;';
        //         }
        //
        //         if (feature !== highlight) {
        //             if (highlight) {
        //                 featureOverlay.getSource().removeFeature(highlight);
        //             }
        //             if (feature) {
        //                 featureOverlay.getSource().addFeature(feature);
        //             }
        //             highlight = feature;
        //         }
        //
        //     };
        //
        //     map.on('pointermove', function(evt) {
        //         if (evt.dragging) {
        //             return;
        //         }
        //         var pixel = map.getEventPixel(evt.originalEvent);
        //         displayFeatureInfo(pixel);
        //     });
        //
        //     map.on('click', function(evt) {
        //         displayFeatureInfo(evt.pixel);
        //     });
        // }
        mounted() {
            let projection = new Projection({
                code: "EPSG:4326",
                units: "degrees",
                axisOrientation: "neu"
            });
            let view = new View({
                center: [0, 0],
                zoom: 2,
                projection: projection,
                extent: [-180.0, -90.0, 180.0, 90.0]
            });

            new Map({
                layers: [
                    new TileLayer({
                        source: new OSM()
                    }),
                    new VectorTileLayer({
                        declutter: true,
                        source: new VectorTileSource({
                            format: new MVT(),
                            projection: projection,
                            tileGrid: new WMTS({
                                tileSize: [256, 256],
                                origin: [-180.0, 90.0],
                                resolutions: [
                                    0.703125,
                                    0.3515625,
                                    0.17578125,
                                    0.087890625,
                                    0.0439453125,
                                    0.02197265625,
                                    0.010986328125,
                                    0.0054931640625,
                                    0.00274658203125,
                                    0.001373291015625,
                                    6.866455078125e-4,
                                    3.4332275390625e-4,
                                    1.71661376953125e-4,
                                    8.58306884765625e-5,
                                    4.291534423828125e-5,
                                    2.1457672119140625e-5,
                                    1.0728836059570312e-5,
                                    5.364418029785156e-6,
                                    2.682209014892578e-6,
                                    1.341104507446289e-6,
                                    6.705522537231445e-7,
                                    3.3527612686157227e-7
                                ],
                                matrixIds: [
                                    "EPSG:4326:0",
                                    "EPSG:4326:1",
                                    "EPSG:4326:2",
                                    "EPSG:4326:3",
                                    "EPSG:4326:4",
                                    "EPSG:4326:5",
                                    "EPSG:4326:6",
                                    "EPSG:4326:7",
                                    "EPSG:4326:8",
                                    "EPSG:4326:9",
                                    "EPSG:4326:10",
                                    "EPSG:4326:11",
                                    "EPSG:4326:12",
                                    "EPSG:4326:13",
                                    "EPSG:4326:14",
                                    "EPSG:4326:15",
                                    "EPSG:4326:16",
                                    "EPSG:4326:17",
                                    "EPSG:4326:18",
                                    "EPSG:4326:19",
                                    "EPSG:4326:20",
                                    "EPSG:4326:21"
                                ]
                            }),
                            wrapX: true,
                            url:
                                "http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=test:AGNP&STYLE=" +
                                "&TILEMATRIX=EPSG:4326:{z}" +
                                "&TILEMATRIXSET=EPSG:4326&FORMAT=application/vnd.mapbox-vector-tile" +
                                "&TILECOL={x}&TILEROW={y}"
                        })
                    })
                ],
                target: "map",
                view: view,
                // view: new View({
                //         center: [0, 0],
                //         zoom: 1
                //       }),
            });


            // var map = new WebGLMap({
            //   view: new View({
            //     center: [0, 0],
            //     zoom: 1
            //   }),
            //   layers: [
            //     new TileLayer({
            //       source: new OSM()
            //     })
            //   ],
            //   target: 'map'
            // });
        }
    };
</script>

<style scoped lang="scss">
    .map {
        height: 100%;
    }
</style>
